<template>
  <div class="box">
    <h1>Child</h1>
    <p>{{count}}</p>
    <button @click="changeProps">修改props的值</button>
    <button @click="add(20)">点击调用父组件的函数并传值</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  //1.数组写法
  props: ["count" , "add"],
  /* //2.对象写法
  // props:{
  //   count: Number,
  //   add: Function
  // }, */
  /* //3.对象写法并限制类型的限制
  props:{
    count:{
      required: true,
      type: Number
    },
    add:{
      required: true,
      type: Function
    }
  }, */

  methods: {
    changeProps(){
      this.count++
    }
  },
};
</script>

<style scoped>
.box {
  background: yellowgreen;
}
</style>
